<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			background: orange;
		}
	</style>
</head>
<body>

<div class="box"></div>
<script type="text/javascript">
	let box = document.querySelector('.box')

	//点击事件 click

	//双击事件
	box.ondblclick = function(){
		console.log('双击事件')
	}
	//鼠标按下事件
	box.onmousedown = function() {
		console.log('鼠标按下事件')
	}
	//鼠标抬起事件
	box.onmouseup = function() {
		console.log('鼠标抬起事件')
	}
	//鼠标移入事件
	box.onmouseover = function() {
		console.log('鼠标移入事件')
	}
	//鼠标移出事件
	box.onmouseout = function() {
		console.log('鼠标移出事件')
	}
	//鼠标移动事件
	box.onmousemove = function() {
		console.log('鼠标移动事件')
	}


	//鼠标移入事件 有冒泡
	box.onmouseenter = function() {
		console.log('鼠标进入事件')
	}
	//鼠标移出事件 有冒泡
	box.onmouseleave = function() {
		console.log('鼠标离开事件')
	}
</script>
</body>
</html>